<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="addFn(1, '0')"
            >添加权限</el-button
          >
        </div>

        <!-- row-key=指定对象里属性（不重复唯一的，作为每个节点的表示类似v-for中key） -->
        <el-table border :data="permissionList" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                type="text"
                v-if="scope.row.pid === '0'"
                @click="addFn(2, scope.row.id)"
                >添加</el-button
              >
              <el-button type="text" @click="editFn(scope.row.id)"
                >编辑</el-button
              >
              <el-button type="text" @click="delFn(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 权限弹框 -->
      <per-dialog
        ref="perForm"
        :show-dialog.sync="showDialog"
        @confirm="confirm"
        :click-id="clickId"
        :is-edit="isEdit"
        :origin-list="perList"
      />
    </div>
  </div>
</template>

<script>
import { getPermissionListAPI, addPermissionAPI, getPermissionDetailAPI, updatePermissionAPI, delPermissionAPI } from '@/api'
import { transTree } from '@/utils'
import PerDialog from './components/perDialog.vue'
export default {
  data () {
    return ({
      permissionList: [],// 权限管理列表数据
      perList: [], // 权限点列表(扁平结构)
      showDialog: false,//弹框显示
      type: 0,//添加页面权限/按钮权限（1/2）
      pid: '',//新增权限点对象的pid值使用
      isEdit: false,//编辑状态
      clickId: '',//当前点击的id哪一行
    })
  },
  components: {
    PerDialog
  },
  created () {
    // 请求权限点
    this.getPermissionListFn()
  },
  methods: {
    // 请求权限点
    async getPermissionListFn () {

      const res = await getPermissionListAPI()
      // console.log(res)
      this.permissionList = transTree(res.data, '0')//数据给权限管理列表
      this.perList = res.data
    },
    // 添加权限弹框
    addFn (type, pid) {
      this.showDialog = true//显示弹框
      this.isEdit = false//编辑关闭

      // 保存到组件属性变量上
      this.type = type//一级还是二级
      this.pid = pid//点击的那个id
      // pid:'0'/点击那行的id值
      // 添加一级/二级
      this.clickId = pid//是增加是点击的id

    },
    // 添加权限接口调用（弹框点确定）
    // 名字(变量名){}-函数定义创建（值就是调用处传递过来的值）--被动接收
    // 名字(变量名)-调用传入值-主动调用别人‘传入’值
    async confirm (dataObj) {
      if (this.isEdit) {//编辑状态-dataObj里已经有了type和pid了
        const res = await updatePermissionAPI(dataObj)
        console.log(res)
      } else {
        // 这是第一种方式
        // {
        //         ...dataObj,
        //         pid: this.pid,
        //         type: this.type
        //       }
        // console.log(dataObj)
        dataObj.pid = this.pid
        dataObj.type = this.type
        const res = await addPermissionAPI(dataObj)
        console.log(res)
      }

      this.getPermissionListFn()//更新页面
    },
    // 编辑权限
    async editFn (id) {
      this.isEdit = true//显示编辑
      this.clickId = id//编辑的时候的id等于id
      this.showDialog = true//弹框显示
      const res = await getPermissionDetailAPI(id)

      console.log(res)
      // 可以用父传子（props方式）子里watch侦听props变量还需要转发赋予给data里的属性
      this.$refs.perForm.formData = res.data
    },
    // 删除
    async delFn (id) {
      await delPermissionAPI(id)
      this.getPermissionListFn()//更新

    }
  }

}
</script>

<style lang="scss" scoped></style>
